@import 'styles/variables'

$color-typo-dark-primary: $black

$color-bg-modal-primary: $white
$color-bg-header-info: #fcf8a0
$color-bg-header-error: #ffb59e
$color-bg-icon-primary: $violet-light-2
$color-bg-icon-secondary: $white

$color-border-primary: $grey-1
$color-border-secondary: $grey-2

.modal__wrapper
  display: flex
  justify-content: center
  align-items: center

  position: fixed
  inset: 0
  z-index: 1000

  background: rgb(0, 0, 0, 0.3)

.modal
  max-width: 670px
  width: 100%
  border: 1px solid $color-border-primary

  background: $color-bg-modal-primary
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25)

  &_type_info
    .modal__header
      background: $color-bg-header-info

  &_type_error
    .modal__header
      background: $color-bg-header-error

    .modal__content_message
      font-size: 1.5rem

  &__header
    padding: 40px 40px 35px
    border-bottom: 1px dashed $color-border-secondary

  &__content
    padding: 35px 45px 30px
    border-bottom: 1px dashed $color-border-secondary

    font-size: 1.125rem
    line-height: 1.16
    color: $color-typo-dark-primary

    &_message
      margin-bottom: 20px

  &__footer
    display: flex
    justify-content: center
    align-items: center

    padding: 30px 30px 20px

  &__icon
    width: 32px
    height: 32px

    &_info .icon
      fill: $color-bg-icon-primary

    &_error .icon
      fill: $color-bg-icon-secondary
      fill-opacity: 0.73

  &__button
    max-width: 230px
